<template>
    <div>
       <!-- 展示列表 -->
        <el-table
                :data="tableData.filter(data => !search || data.country_name.toLowerCase().includes(search.toLowerCase()) 
                || data.english_name.toLowerCase().includes(search.toLowerCase()))"
                stripe    
                :height="335"           
                highlight-current-row
                style="width: 60%; margin: auto;" 
                class="animate__animated animate__fadeInDown">
            <el-table-column fixed prop="id" label="编号"> </el-table-column>
                                     
            <el-table-column prop="country_name" label="中文国家名"></el-table-column>
                
            <el-table-column prop="english_name" label="英文国家名"></el-table-column>
                                
            <el-table-column align="right">
                <template slot="header" slot-scope="scope">                
                  <el-input v-model="search" clearable size="mini" placeholder="请输入要查询的关键字"/>                 
                </template>
                <template slot-scope="scope">   
                    <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table> 

        <!--分页  @current-change="page"绑定点击页数-->
        <!-- <el-pagination
                style="margin-top: 10px;"
                background
                layout="prev, pager, next"
                page-size="5"
                :total="total"
                @current-change="page"
                class="animate__animated animate__fadeInUp">
        </el-pagination> -->

         <!-- 添加按钮 -->
        <div id="btn_add" class="animate__animated animate__flip">
          <el-button  @click="add_btn" type="success" size="small">添加</el-button>
        </div>

       <!-- 添加表单 -->
       <div id="box_add">
        <transition name="el-zoom-in-center">
          <div v-show="show" class="transition-box">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="中文国家名" prop="country_name">
                <el-input v-model="ruleForm.country_name"></el-input>
              </el-form-item>
              <el-form-item label="英文国家名" prop="english_name">
                <el-input v-model="ruleForm.english_name"></el-input>
              </el-form-item>            
              <el-form-item>
                <el-button type="primary" @click="add('ruleForm')">立即添加</el-button>
                <el-button type="info" @click="back">取消</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </transition>
       </div>

        <!-- 修改表单 -->
       <div id="box_edit">
        <transition name="el-zoom-in-center">
          <div v-show="show2" class="transition-box">
            <el-form :model="ruleForm_2" :rules="rules" ref="ruleForm_2" label-width="100px" class="demo-ruleForm">
              <el-form-item label="编号" prop="id">
                <el-input v-model="ruleForm_2.id" readOnly></el-input>
              </el-form-item>
              <el-form-item label="中文国家名" prop="country_name">
                <el-input v-model="ruleForm_2.country_name"></el-input>
              </el-form-item>
              <el-form-item label="英文国家名" prop="english_name">
                <el-input v-model="ruleForm_2.english_name"></el-input>
              </el-form-item>     
              <el-form-item>
                <el-button type="primary" @click="edit_2('ruleForm_2')">确定修改</el-button>
                <!-- <el-button type="info" @click="back">取消</el-button> -->
                <el-button @click="resetForm_2('ruleForm_2')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </transition>
       </div>

      

    </div>
</template>

<script>
    export default {
      data() {
            return {
                total: null, //总页数
                tableData: null, //表单数据
                search: '',
                show: false,
                show2:false,
                ruleForm: {
                    id:'',
                    country_name: '',
                    english_name: '',
                }, 
                ruleForm_2:{
                    id:'',
                    country_name: '',
                    english_name: '',
                },
                rules: {
                    country_name: [
                        {required: true, message: '不能为空', trigger: 'blur'}
                    ],
                    english_name: [
                        {required: true, message: '不能为空', trigger: 'blur'}
                    ]
                },                     
            }
          },          
          created() {
             this.findAllData();
          },
          methods: {
            // page(currentPage) { //获取每页展示的条数并展示
            //     const _this = this
            //     this.axios.get('/country/findAll/' + currentPage + '/5').then(function (resp) {
            //         _this.tableData = resp.data.content
            //         _this.total = resp.data.totalElements
            //         _this.pageSize = resp.data.size
            //     })
            // },             
            add(formName) {
              const _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.axios.post('/country/save',this.ruleForm).then(function(resp){
                            if(resp.data == 'success'){
                                _this.$message({
                                   message: '添加 "'+_this.ruleForm.country_name+'" 成功！',
                                   type: 'success'
                                });
                                //清空表单信息
                                _this.ruleForm = {};
                                //隐藏表单
                                _this.show = false;
                                //刷新页面
                                _this.findAllData();

                                // _this.$alert('《'+_this.ruleForm.country_name+'》添加成功！', '消息', {
                                //     confirmButtonText: '确定',
                                //     callback: action => {
                                //         // _this.$router.push('/country')
                                //         window.location.reload()
                                //     }
                                // })
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            add_btn(){
              this.show = !this.show
              this.show2 = false 
            },
            resetForm(formName) {
              this.$refs[formName].resetFields();
            }, 
            resetForm_2(formName){
              this.ruleForm_2.country_name=""
              this.ruleForm_2.english_name=""
            },
            findAllData(){
              const _this = this
              this.axios.get('/country/findAll').then(function (resp) {
                  _this.tableData = resp.data   //拿到数据库的数据
                  // _this.pageSize = resp.data.size
                  // _this.total = resp.data.totalElements  //拿到总页数
              })
            },     
            edit(row) { //点击修改按钮的相关操作
              this.$confirm('是否要修改"'+row.country_name+'  '+row.english_name+'"?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.show2 = !this.show2
                this.show = false
                this.ruleForm_2 = row  
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消修改'
                });          
              });
                         
            },          
            edit_2(formName){//修改数据操作
              const _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.axios.put('/country/update', this.ruleForm_2).then(function (resp) {
                            if (resp.data == 'success') {
                              _this.$message({
                                   message: '修改 "'+_this.ruleForm_2.country_name+'" 成功！',
                                   type: 'success'
                                });
                                //隐藏表单
                                _this.show2 = false;
                                //刷新页面
                                _this.findAllData();
                                // _this.$alert('《' + _this.ruleForm_2.country_name + '》修改成功！', '消息', {
                                //     confirmButtonText: '确定',
                                //     callback: action => {
                                //         _this.$router.push('/page1')
                                //     }
                                // })
                            }
                        })
                    } else {                      
                        return false;
                    }
                });
            },
            deleteBook(row) { //删除操作
                const _this = this               
                this.$confirm('确定要删除 "' + row.country_name + ' '+row.english_name+'" 吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {               
                  this.axios.delete('/country/deleteById/' + row.id).then(function (resp) {
                    // _this.$alert('删除 "' + row.country_name + '" 成功！', '消息', {
                    //     confirmButtonText: '确定',
                    //     callback: action => {
                    //         window.location.reload()
                    //     }
                    // })
                    _this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                    // window.location.reload()
                    _this.findAllData();
                })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
                
            },
            back(){
              this.show=false
              this.show2=false
            }
          }
              
        }         
</script>

<style>
    #btn_add {
      width: 10%;
      margin-left: 17%;
      margin-top: 10px;
    }
    .transition-box {
    margin-left: 19%;
    margin-top: 10px;   
    height: 200px;
    border-radius: 4px;
    text-align: center;
    box-sizing: border-box;
  }
  #box_add{
    float: left;
    margin-left: 10%;
    width: 35%;
  }
  #box_edit{
    margin-right: 16%;
    float:right;
    width: 35%;
  }
</style>
